<template>
	<div class="login-page">
		<div class="login-content">
			<van-nav-bar >
				<template #title>
					<div class="title">
						登录
					</div>
				</template>
			</van-nav-bar>
			<van-form @submit="onSubmit">
				<van-field v-model="phone" name="phone" label="手机号" placeholder="手机号"
					:rules="[{ min:11,max:11,required: true, message: '请填写手机号' }]" />
				<van-field v-model="phoneCode" name="phoneCode" label="验证码" placeholder="验证码"
					:rules="[{min:6,max:6, required: true, message: '请填写验证码' }]" />
        <van-button type="primary" style="width:100px;height:40px;font-size:12px;position: absolute;top:440px;left:270px" @click="getCode()">{{codeMessage}}</van-button>
				<div style="margin: 16px">
					<van-button block type="primary" native-type="submit">登录/注册</van-button>
				</div>
			</van-form>
			<router-link to="/home" class="link">去首页</router-link>
		</div>
	</div>
</template>

<script setup>
import {login,getCodePhone} from "@/api/login"
import {getTokenKey} from "@/utils/contants.js";
const getGoodsnum = inject('$provideGoodsnum')
const getLang = inject('$provideLang')
const router = useRouter();
let phone = ref("");
let phoneCode = ref("");
localStorage.setItem("show1",false);
localStorage.setItem("show2",false);
localStorage.setItem("show3",false);
const codeMessage=ref("获取验证码")
const onSubmit = async (values) => {
  const {data}=await login(phone.value,phoneCode.value)
  console.log(data)
  if(+data.code==200){
    sessionStorage.setItem(getTokenKey(),data.data)
    localStorage.removeItem("isUse")
    router.replace({ name: "Guang" });
  }
};
const getCode= async ()=>{
  codeMessage.value="已发送"
  const {data} = await getCodePhone(phone.value);
  phoneCode.value=data.data
}
</script>

<style lang="less" scoped>
.login-page {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	background-image: url("~@/assets/images/login.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.9;
	.login-content {
		margin: auto;
		padding: 10px 10px 20px 10px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		opacity: 0.9;
		.title{
            font-size: 20px;
            font-weight: 600;
        }
	}

	.link {
		font-size: 12px;
		color: #069;
		float: right;
		margin-right: 15px;
	}
}
</style>
